<template>
    <view class="goods-info-txt">
        <view class="desc-box" v-for="(item, index) in goosDesc" :key="index">
            <view class="i-title">
                <view
                    class="item"
                    :class="index == titleIndex ? 'active' : ''"
                    @click="ontitle(item, index)"
                >
                    {{ item.title }}
                    <!-- 空盒子添加线条 -->
                    <view :class="index == titleIndex ? 'active-s' : ''"></view>
                </view>
            </view>
            <view class="i-txt" v-if="index == titleIndex">
                <view v-for="(items, indexs) in item.item_ls" :key="indexs">
                    <view class="items-title">{{ items.txt }}</view>

                    <div class="img-box">
                        <img
                            v-for="(itemimg, indeximg) in items.img_ls"
                            :key="indeximg"
                            :src="itemimg.path || goodsImg"
                            class="img-row"
                        />
                    </div>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";

export default {
    props: ["goosDesc"],
    data() {
        return {
            titleIndex: 0,
            goodsImg: staticConst.GOOD_IMG,
        };
    },
    created() {},
    methods: {
        ontitle(item, index) {
            if (this.titleIndex == index) return;
            this.titleIndex = index;
        },
    },
};
</script>

<style lang="scss">
.goods-info-txt {
    padding: 10px;
    padding-left: 20px;
    display: flex;
    position: relative;
    font-size: 14px;
    .desc-box {
        .i-title {
            padding-bottom: 6px;
            .active {
                color: #3388ff;
            }
            .item {
                cursor: pointer;
                margin-right: 10px;
                .active-s {
                    width: 20px;
                    margin: 0 auto;
                    border-bottom: 2px solid #3388ff;
                }
            }
        }
        .i-txt {
            position: absolute;
            left: 20px;
            margin-top: 10px;
            .items-title {
                padding-bottom: 6px;
            }
            .img-box {
                width: 500px;
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 20px;
                .img-row {
                    margin-top: 10px;
                    margin-right: 10px;
                    width: 100px;
                    height: 100px;
                    object-fit: cover;
                }
            }
        }
    }
}
</style>
